<template>
  <div class="desc">
    <headcamp :back="$route.meta.back" :title="$route.meta.title"></headcamp>
    <ul class="all">
      <li v-for="(item, i) in shopList" :key="i">
        <img :src="$pre + item.img" alt="" />
        <div class="small">
          <div class="pic">
            <div>
              <span class="pics"
                ><span>￥</span
                ><span class="big">{{ item.market_price }}</span></span
              >
              <span class="bigp">￥{{ item.price }}</span>
            </div>
            <div>
              <span class="man">收藏</span>
            </div>
          </div>
          <h4 class="name">{{ item.name }}</h4>
          <p class="intro">{{ item.intro }}</p>

          <div class="time">11.11限时299元起</div>
          <div class="bots">
            此商品于2020-11-11.00点结束山闪购特卖，品牌美妆闪购专场
          </div>
        </div>
      </li>
    </ul>

    <!-- //领卷 -->
    <div class="roll">
      <div class="rollLeft">
        <h5>领卷</h5>
        <div class="roll-img">
          <div class="s1">
            <img class="img1" src="../../assets/pic/full.png" alt="" />
            <span class="sprice">￥300</span>
          </div>
          <div class="s2">
            <img class="img2" src="../../assets/pic/full.png" alt="" />
            <span class="sprice2">￥50</span>
          </div>
          <div class="s3">
            <img class="img3" src="../../assets/pic/full.png" alt="" />
            <span class="sprice3">￥10</span>
          </div>
        </div>
      </div>
      <div class="rollRight">
        <h5>分期</h5>
        <div class="ke">可选3/6/12期</div>
      </div>
      <div class="shop">
        <div>
          <span>商品属性</span>
          <img src="../../assets/left.png" alt="" />
        </div>
        <div class="color">
          <div>颜色</div>
          <div class="color-color">
            <div class="red">红色</div>
            <div class="info">灰色</div>
          </div>
        </div>
      </div>
    </div>
    <!-- //领卷 -->
    <!-- //商品详情 -->
    <div class="xq">
      <h5>商品详情</h5>
      <img src="../../assets/nv.png" alt="" />
      <img src="../../assets/one.png" alt="" />
    </div>
    <!-- //商品详情 -->
    <!-- //商品评价 -->
    <div class="pj">
      <h5>商品评价</h5>
      <p>小李白</p>
      <h4>效果很好，物流到位，下次不来</h4>
      <img class="six" src="../../assets/six.png" alt="" />
      <p>2020-01-13</p>
      <div class="ren">
        <img class="renS" src="../../assets/ren.png" alt="" />
      </div>
    </div>
    <!-- //商品评价 -->
    <!-- //底部导航 -->
    <van-goods-action class="tarbar">
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum" @click="gocart" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="info" text="加入购物车" @click="add" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- //弹出框 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="id"
      @add-cart="onAddCartClicked"
    />
    <!-- //弹出框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      uid:this.$utils.getuid(),
      id: 1,
      shopList: [],
      goods: {}, //展示数据图片
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "蓝色", // skuValueName：规格值名称
                imgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/195251/28/503/70907/608a8bc4E87eaf1ae/9aa39ad669ed7f39.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/195251/28/503/70907/608a8bc4E87eaf1ae/9aa39ad669ed7f39.jpg", // 用于预览显示的规格类目图片
              },
              {
                id: "2",
                name: "粉色",
                imgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/131776/9/23287/325305/621f295fE9dc6a3ce/117b4d1ed262266a.jpg",
                previewImgUrl:
                  "https://img14.360buyimg.com/n0/jfs/t1/131776/9/23287/325305/621f295fE9dc6a3ce/117b4d1ed262266a.jpg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
          {
            k: "内存",
            k_s: "s2",
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "4G", // skuValueName：规格值名称
              },
              {
                id: "2", // skuValueId：规格值 id
                name: "8G", // skuValueName：规格值名称
              },
            ],
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1",
            price: 200000, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2260, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2",
            price: 300000, // 价格（单位分）
            stock_num: 60, // 当前 sku 组合对应的库存
          },
          {
            id: 2261, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2",
            price: 320000, // 价格（单位分）
            stock_num: 30, // 当前 sku 组合对应的库存
          },
          {
            id: 2261, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1",
            price: 280000, // 价格（单位分）
            stock_num: 200, // 当前 sku 组合对应的库存
          },
        ],
        price: "1999", // 默认价格（单位元）
        stock_num: 400, // 商品总库存
      },
      cartNum:0,//右上角小图标
    };
  },
  methods: {
    fn() {
      let { id } = this;
      this.$api.goodDesc({ id }).then((res) => {
        // console.log(res);
        this.shopList = res.data.list;
        
        this.goods = { picture: this.$pre + res.data.list[0].img };
      });
    },
    add() {
      this.show = true;
    },
    //跳购物车页面
    gocart(){
       this.$router.push('/cart')
    },
    // 添加
    onAddCartClicked(info){
      console.log(info);
      console.log(this.shopList);
       this.$api.addcar({goodsid:this.id,num:info.selectedNum,uid:this.uid}).then(res=>{
         console.log(res);
         this.$notify({
            type: "success",
            message: "添加成功 ",
          });
       })
       this.show=false
       
    }
  },
  created() {},
  mounted() {
    this.id = this.$route.query.id;
    this.fn();
  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='less' scoped>
.desc {
  width: 100%;

  background-color: #eee;
}

.all {
  li {
    background-color: #fff;

    img {
      width: 100%;
    }
    .small {
      .name {
        font-size: 20px;
      }
      .intro {
        color: #888;
        font-size: 15px;
      }
      .pic {
        display: flex;
        width: 100vw;
        justify-content: space-between;
        margin-top: 10px;
        .pics {
          font-weight: 800;
          color: #ff7f65;
          .big {
            font-size: 25px;
          }
        }
        .bigp {
          text-decoration: line-through;
          color: #888;
          font-size: 14px;
        }
      }

      .time {
        padding: 0;
        margin-top: 0.625rem;
        background-color: #ff7f65;
        color: aliceblue;
        width: 8.25rem;
      }
      .bots {
        background-color: #eee;
        font-size: 13px;
        padding: 5px;
        color: #888;
        margin: 10px 0;
      }
    }
  }
}
.roll {
  background-color: #fff;
  margin-top: 20px;
  .rollLeft {
    display: flex;
    height: 50px;
    align-items: center;

    h5 {
      padding: 0 15px;
    }
    .roll-img {
      width: calc(100% - 70px);
      border-bottom: 1px solid #888;
      padding: 5px 0;
      display: flex;
      .s1 {
        margin-right: 50px;
        .img1 {
          position: absolute;

          margin-right: 10px;
          height: 50px;
        }
        .sprice {
          position: relative;
          font-size: 35px;
          left: 0;
          top: 0;
        }
      }
      .s2 {
        margin-right: 70px;
        .img2 {
          position: absolute;

          margin-right: 30px;
          height: 50px;
        }
        .sprice2 {
          position: relative;
          font-size: 35px;
          left: 0;
          top: 0;
        }
      }

      .img3 {
        position: absolute;
        margin-right: 10px;
        height: 50px;
      }
      .sprice3 {
        position: relative;
        font-size: 35px;
        left: 0;
        top: 0;
      }
    }
  }
  .rollRight {
    display: flex;

    align-items: center;
    h5 {
      padding: 0 15px;
    }
    .ke {
      color: #888;
      width: calc(100% - 70px);

      border-bottom: 1px solid #888;
    }
  }
  .shop {
    padding: 15px;
    .color {
      height: 50px;
      line-height: 50px;
      display: flex;
      margin-top: 10px;
    }
    .color-color {
      display: flex;
      margin-left: 25px;
      font-size: 14px;
      .red {
        height: 50px;
        width: 70px;
        background-color: #d00;
        color: #fff;
        text-align: center;
        line-height: 50px;
      }
      .info {
        height: 50px;
        width: 70px;
        background-color: #e1e1e1;
        color: #fff;
        text-align: center;
        line-height: 50px;
        margin-left: 10px;
      }
    }
  }
}
.xq {
  margin-top: 20px;
  background-color: #fff;
  h5 {
    font-size: 18px;
    font-weight: normal;
    padding: 15px;
  }
  img {
    width: 100%;
  }
}
.pj {
  position: absolute;
  background-color: #fff;
  margin-top: 20px;
  padding: 0 15px;
  h5 {
    padding: 15px 0;
    font-size: 18px;
    font-weight: normal;
    width: 100%;
    border-bottom: 1px solid #888;
  }
  p {
    color: #888;
    padding: 10px 0;
  }
  h4 {
    font-weight: normal;
    font-size: 19px;
    padding: 10px 0;
  }
  .six {
    width: 100%;
  }
  .ren {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    background-color: #cccccc;
    line-height: 60px;
    position: relative;
    right: -519px;
    bottom: 200px;

    .renS {
      margin-top: 10px;
    }
  }
}
.tarbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 80px;
  background-color: #fff;
}
</style>
 